<template>
	<view class="padding-b160">
		<view class="main-pic">
			<image style="width: 100%; height: 400rpx;" :src="goodsDetail.mainPic"></image>
		</view>
		<view class="goods-name">{{goodsDetail.goodsName}}</view>
		<uv-cell-group :border="false">
			<uv-cell title="兑换数量" :border="false">
				<template v-slot:value>
					<view class="buy-quantity">
						{{quantity}}
					</view>
				</template>
			</uv-cell>
		</uv-cell-group>
		<uv-gap height="8" bgColor="#e8e8e8"></uv-gap>
		<view class="padding-lr32">
			<view class="consignee-info-title">收货人信息</view>
			<uv-form label-position="top" label-width="150">
				<uv-form-item label="收货人姓名">
					<uv-input placeholder="请输入收货人姓名" v-model="consignee" type="text" :clearable="false"></uv-input>
				</uv-form-item>
				<uv-form-item label="手机号码">
					<uv-input placeholder="请输入收货人手机号码" v-model="mobile" type="text" :clearable="false"></uv-input>
				</uv-form-item>
				<uv-form-item label="所在地区">
					<uv-input placeholder="省市区县等" v-model="location" type="text" :clearable="false"></uv-input>
				</uv-form-item>
				<uv-form-item label="详细地址">
					<uv-textarea v-model="detailAddress" placeholder="街道门牌、楼层房间号等信息"></uv-textarea>
				</uv-form-item>
			</uv-form>
		</view>

		<view class="fixed-bottom">
			<view class="fixed-bottom-inner">
				<uv-button type="primary" text="下单" size="large" color="#F7C566" @click="goodsExchange"></uv-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsId: '',
				goodsDetail: '',
				quantity: '',
				consignee: '',
				mobile: '',
				location: '',
				detailAddress: '',
			}
		},
		onLoad(option) {
			this.goodsId = option.id;
			this.quantity = option.quantity;
			this.findGoodsById();
		},
		methods: {

			goodsExchange() {
				var that = this;
				if (that.consignee == null || that.consignee == '') {
					uni.showToast({
						title: "请输入收货人姓名",
						icon: "none"
					});
					return;
				}
				if (that.mobile == null || that.mobile == '') {
					uni.showToast({
						title: "请输入收货人手机号码",
						icon: "none"
					});
					return;
				}
				if (that.location == null || that.location == '') {
					uni.showToast({
						title: "请输入所在地区",
						icon: "none"
					});
					return;
				}
				if (that.detailAddress == null || that.detailAddress == '') {
					uni.showToast({
						title: "请输入详细地址",
						icon: "none"
					});
					return;
				}
				uni.$uv.http.post('/goodsExchangeOrder/physicalGoodsExchange', {
					goodsId: that.goodsId,
					quantity: that.quantity,
					consignee: that.consignee,
					mobile: that.mobile,
					location: that.location,
					detailAddress: that.detailAddress
				}).then(res => {
					uni.showToast({
						icon: 'success',
						title: '操作成功',
						duration: 2000,
						complete: function() {
							setTimeout(() => {
								uni.reLaunch({
									url: "../my/my"
								});
							}, 2000);
						}
					});
				});
			},

			findGoodsById() {
				var that = this;
				uni.$uv.http.get('/goods/findById', {
					params: {
						id: that.goodsId
					}
				}).then(res => {
					that.goodsDetail = res.data;
				});
			},
		}
	}
</script>

<style>
page {
	height: auto !important;
	background: url('/static/img/my_bg.png') no-repeat;
	background-size: 100% 100%;
	background-color: #FFFFFF;
}
	.my-point {
		color: #d0021b;
		padding-top: 32rpx;
		font-weight: bold;
	}

	.buy-quantity {
		padding-right: 32rpx;
	}

	.consignee-info-title {
		font-weight: bold;
		padding-top: 32rpx;
	}

	.goods-name {
		padding-top: 24rpx;
		padding-left: 32rpx;
		padding-right: 32rpx;
		font-weight: bold;
	}

	.goods-amount {
		display: flex;
		padding-bottom: 12rpx;
		padding-top: 12rpx;
		align-items: center;
		padding-left: 32rpx;
		padding-right: 32rpx;
		font-size: larger;
	}

	.goods-amount-l {
		color: #d0021b;
		flex: 1;
		font-weight: bold;
	}

	.goods-amount-r {
		font-size: smaller;
		color: #888;
	}

	.detail-title {
		text-align: center;
		padding-top: 16rpx;
		padding-bottom: 16rpx;
		font-weight: bold;
	}

	.goods-detail-content {}
</style>